<template>
	<view>
		<view v-for="item,i in list" :key="i">
			<view class="new-box">
				<view class="main-wrap">
					<view class="img-box">
						<image :src="item.nImg" @click="clickImg()"></image>
					</view>
				</view>
				<view class="new-cont" @click="newsDetail()">
					<view class="new-tit">{{ item.nTit }}</view>
					<view class="new-t-bot">
						<view class="n-date">{{ item.nDate }}</view>
						<view class="n-t-b-right">
							<view class="n-read">阅读 {{ item.nRead }}</view>
							<view class="n-zan">赞 {{ item.nZan }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="n-bot-line"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						nImg:'../../static/logo.png',
						nTit:'中山大学召开2021年来华留学生招生工作推动会,中山大学召开2021年来华留学生招生工作推动会',
						nDate:'8月3日',
						nRead:'7.5万',
						nZan:'99'
					},{
						nImg:'../../static/logo.png',
						nTit:'中山大学召开2021年来华留学生招生工作推动会',
						nDate:'8月3日',
						nRead:'7.5万',
						nZan:'99'
					},
				]
			}
		},
		methods: {
			clickImg() {
				uni.previewImage({
					urls: ["../../static/logo2.png",],
					current: '',
					indicator:'default'
				})
			},
			newsDetail(){
				uni.navigateTo({
					url:'./news_details'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.new-box{
		display: flex;
		padding: 30upx 30upx;
		.main-wrap{
			margin-right: 30upx;
			.img-box{
				width: 192upx;
				height: 162upx;
				image{
					display: block;
					width: 100%;
					height: 100%;
					background-color:rgba(220,38,38,0.2);
				}
			}
		}
		.new-cont{
			.new-tit{
				color: #020202;
				font-size: 28upx;
				margin-bottom: 50upx;
				overflow: hidden !important;
				display: -webkit-box !important;
				text-overflow: ellipsis !important;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.new-t-bot{
				display: flex;
				justify-content: space-between;
				color: #B7B6B6;
				font-size: 24upx;
				.n-t-b-right{
					display: flex;
					.n-zan{
						margin-left: 40upx;
					}
				}
			}
		}
	}
	.n-bot-line{
		width: 100%;
		height: 2upx;
		background: #E4E4E4;
	}
</style>
